<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="1090px"
      :title="title"
      wrapClassName="rotate-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <div class="rotate-video">
          <EZUIKitJs
            v-if="playerToken"
            :headerList="headerList"
            :footerList="footerList"
            :accessToken="playerToken"
            :deviceSerial="resultData.deviceSerialNumber"
            :channelNo="resultData.channelNumber"
            :isHd="isHd"
            :key="key"
          ></EZUIKitJs>
        </div>
        <div class="rotate-operation">
          <div class="title">角度调整</div>
          <div class="container">
            <div class="bg">
              <div
                v-if="resultData.type == 0"
                class="left operate-button"
                @click="startVideoControl(2)"
              ></div>
              <div v-else class="ash_left"></div>
              <div
                v-if="resultData.type == 0"
                class="right operate-button"
                @click="startVideoControl(3)"
              ></div>
              <div v-else class="ash_right"></div>
              <div
                v-if="resultData.type == 0"
                class="refresh operate-button"
                @click="startVideoControl(11)"
              ></div>
              <div v-else class="ash_refresh"></div>
              <div
                v-if="resultData.type == 0"
                class="up operate-button"
                @click="startVideoControl(0)"
              ></div>
              <div v-else class="ash_up"></div>
              <div
                v-if="resultData.type == 0"
                class="down operate-button"
                @click="startVideoControl(1)"
              ></div>
              <div v-else class="ash_down"></div>
            </div>
          </div>
          <div class="foot">
            <div class="button" @click="startVideoControl(8)">放大</div>
            <div class="button" @click="startVideoControl(9)">缩小</div>
            <div class="button" v-if="superAuth" @click="addPreset()">复位</div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import VueVideo from "@/components/VueVideo";
import EZUIKitJs from "@/components/EZUIKitJs";
import {
  getZhgdVideoDetail,
  setVideoIntdata,
} from "@/api/wisdom-beam/security-app.js";
import { getPurView } from "@/api/user-center/userManage.js";
import {
  getVideoToken,
  startVideoControl,
  stopVideoControl,
  addPreset,
  clearPreset,
  movePreset,
} from "@/api/monitor_video.js";
export default {
  name: "videoPtzModal",
  components: {
    VueVideo,
    EZUIKitJs,
  },
  props: ["visible", "title", "id"],
  data() {
    return {
      resultData: {},
      key: 0,
      index: "",
      superAuth: false,
      //Ezuik-js
      playerToken: "",
      isHd: false,
      headerList: [
        {
          iconId: "deviceName",
          part: "left",
          defaultActive: 0,
          memo: "顶部设备ID",
          isrender: 1,
        },
      ],
      footerList: [
        {
          iconId: "play",
          part: "left",
          defaultActive: 1,
          memo: "播放",
          isrender: 1,
        },
        {
          iconId: "capturePicture",
          part: "left",
          defaultActive: 0,
          memo: "截屏按钮",
          isrender: 1,
        },
        {
          iconId: "sound",
          part: "left",
          defaultActive: 0,
          memo: "声音按钮",
          isrender: 1,
        },
        {
          iconId: "recordvideo",
          part: "left",
          defaultActive: 0,
          memo: "录制按钮",
          isrender: 1,
        },
        {
          iconId: "webExpend",
          part: "right",
          defaultActive: 0,
          memo: "网页全屏按钮",
          isrender: 1,
        },
        {
          iconId: "expend",
          part: "right",
          defaultActive: 0,
          memo: "全局全屏按钮",
          isrender: 1,
        },
      ],
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.isHd = this.$parent.videoDefinition;
          this.key++;
          this.getDetail();
          this.getSuperAdminAuth();
        }
      },
      immediate: true,
    },
  },

  methods: {
    //查询操作权限
    getSuperAdminAuth() {
      getPurView()
        .then((res) => {
          this.superAuth = res?.data?.result || false;
        })
        .catch((_) => {
          this.superAuth = false;
        });
    },

    checkReset() {
      let { uid } = JSON.parse(localStorage.getItem("USER_INFO"));
      return uid == "3dd2faecb55f60a0c1d20dd814d792d1";
    },

    //设置预置点
    async addPreset() {
      let { deviceSerialNumber, channelNumber, intdata } = this.resultData;
      //   let token = await this.getVideoToken();
      if (intdata) {
        await this.clearPreset();
      }
      let params = {
        accessToken: this.playerToken,
        deviceSerial: deviceSerialNumber,
        channelNo: channelNumber,
      };
      addPreset(params).then((res) => {
        let { data } = res;
        this.index = data?.index || "";
        setVideoIntdata({ vedioId: this.id, intdata: this.index })
          .then((res) => {
            this.$message.success("操作成功");
          })
          .catch((_) => {
            this.$message.error("操作失败，请稍后重试");
          });
      });
    },

    //清楚预置点
    async clearPreset() {
      let { deviceSerialNumber, channelNumber, intdata } = this.resultData;
      //   let token = await this.getVideoToken();
      let params = {
        accessToken: this.playerToken,
        deviceSerial: deviceSerialNumber,
        channelNo: channelNumber,
        index: intdata,
      };
      clearPreset(params).then((res) => {});
    },

    //调用预置点
    async movePreset() {
      let { deviceSerialNumber, channelNumber } = this.resultData;
      //   let token = await this.getVideoToken();
      let params = {
        accessToken: this.playerToken,
        deviceSerial: deviceSerialNumber,
        channelNo: channelNumber,
        index: this.index,
      };
      movePreset(params).then((res) => {
        console.log(res);
      });
    },

    //
    getVideoToken() {
      return new Promise((resolve, reject) => {
        getVideoToken({
          appKey: this.resultData.appkey,
          appSecret: this.resultData.secret,
        })
          .then((res) => {
            let { data } = res;
            resolve(data?.accessToken || "");
          })
          .catch((_) => {
            reject("");
          });
      });
    },

    //开始云台控制【开始云台控制之后必须先调用停止云台控制接口才能进行其他操作】
    async startVideoControl(direction) {
      if (!this.playerToken) {
        this.$message.error({
          content: "appKey不存在",
          duration: 3,
        });
        return;
      }
      let { deviceSerialNumber, channelNumber } = this.resultData;
      //   let token = await this.getVideoToken();
      let params = {
        accessToken: this.playerToken,
        direction,
        deviceSerial: deviceSerialNumber,
        channelNo: channelNumber,
        speed: 1,
      };
      startVideoControl(params).then((res) => {
        setTimeout((_) => {
          this.stopVideoControl(params);
        }, 1000);
      });
    },

    //停止云台控制
    stopVideoControl(params = {}) {
      return new Promise((resolve, reject) => {
        stopVideoControl(params)
          .then((res) => {
            setTimeout(() => {
              this.$message.success({
                content: "操作成功",
                key: "updatable",
                duration: 1,
              });
            }, 100);
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //查询详情
    getDetail() {
      getZhgdVideoDetail(this.id)
        .then((res) => {
          let { data } = res;
          this.resultData = data?.result || "";
          this.index = data?.result?.intdata;
          this.getVideoToken()
            .then((token) => {
              if (!token) {
                this.$message.error({
                  content: "appKey不存在",
                  duration: 3,
                });
              }
              this.playerToken = token;
            })
            .catch((_) => {
              this.playerToken = "";
            });
        })
        .catch((_) => {
          this.index = "";
        });
    },
    //关闭弹框
    closeModal() {
      this.key = 0;
      this.$emit("update:visible", false);
      if (this.index) {
        this.movePreset();
      }
      this.playerToken = "";
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.rotate-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px;
    height: 610px;
    .flex();
    .rotate-video {
      flex: 1;
      background: #000;
    }
    .rotate-operation {
      margin-left: 6px;
      width: 310px;
      .flex();
      flex-direction: column;
      //   justify-content: space-between;
      .title {
        background: #f7f9fc;
        padding: 4px 20px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #575757;
      }
      .container {
        padding: 20px;
        box-sizing: border-box;
        .flex;
        align-items: center;
        justify-content: center;
        .bg {
          position: relative;
          height: 220px;
          width: 220px;
          background: url("https://jszhgd.cn/static/pc/security-app/chassis.png")
            no-repeat center center;
          background-size: 100% 100%;
          .operate-button {
            &:active {
              opacity: 0.6;
            }
          }
          .left {
            cursor: pointer;
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translate(0, -50%);
            width: 22px;
            height: 30px;
            background: url("https://jszhgd.cn/static/pc/security-app/left.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .ash_left {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translate(0, -50%);
            width: 22px;
            height: 30px;
            background: url("https://jszhgd.cn/static/pc/security-app/ash_left.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .right {
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translate(0, -50%);
            width: 22px;
            height: 30px;
            background: url("https://jszhgd.cn/static/pc/security-app/right.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .ash_right {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translate(0, -50%);
            width: 22px;
            height: 30px;
            background: url("https://jszhgd.cn/static/pc/security-app/ash_right.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .refresh {
            cursor: pointer;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 46px;
            height: 46px;
            background: url("https://jszhgd.cn/static/pc/security-app/refresh.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .ash_refresh {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 46px;
            height: 46px;
            background: url("https://jszhgd.cn/static/pc/security-app/ash_refresh.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .up {
            cursor: pointer;
            position: absolute;
            left: 50%;
            top: 20px;
            transform: translate(-50%, 0);
            width: 30px;
            height: 22px;
            background: url("https://jszhgd.cn/static/pc/security-app/up.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .ash_up {
            position: absolute;
            left: 50%;
            top: 20px;
            transform: translate(-50%, 0);
            width: 30px;
            height: 22px;
            background: url("https://jszhgd.cn/static/pc/security-app/ash_up.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .down {
            cursor: pointer;
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translate(-50%, 0);
            width: 30px;
            height: 22px;
            background: url("https://jszhgd.cn/static/pc/security-app/down.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
          .ash_down {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translate(-50%, 0);
            width: 30px;
            height: 22px;
            background: url("https://jszhgd.cn/static/pc/security-app/ash_down.png")
              no-repeat center center;
            background-size: 100% 100%;
          }
        }
      }
      .foot {
        padding: 20px;
        box-sizing: border-box;
        .flex();
        justify-content: space-between;
        .button {
          cursor: pointer;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: var(--primary-color);
          .flex();
          align-items: center;
          justify-content: center;
          width: 70px;
          height: 46px;
          background: url("https://jszhgd.cn/static/pc/security-app/button-nocheck.png")
            no-repeat center center;
          background-size: 100% 100%;
          box-sizing: border-box;
          &.text {
            font-size: 14px;
            padding: 0 10px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
